<template>
	<view class="page">

		<!-- 步骤指示器 -->
		<view class="step-indicator">
			<view class="step" v-for="(item, index) in steps" :key="index" :class="{ 'second-step': index === 1 }">
				<view class="step-number" :class="{ 'completed': index < currentStep }">
					{{ index + 1 }}
				</view>
				<text class="step-text">{{ item }}</text>
			</view>
		</view>

		<!-- 拍机堂优势 -->
		<view class="advantage-section">
			<view class="section-title">
				<text class="iconfont icon-sparkle"></text>
				<text>拍机堂优势</text>
				<text class="iconfont icon-sparkle"></text>
			</view>
			<view class="advantage-list">
				<view class="advantage-item">
					<text class="advantage-title">海量商家</text>
					<text class="advantage-desc">日活商家上万</text>
				</view>
				<view class="advantage-item advantage-item-step">
					<text class="advantage-title">周转极速</text>
					<text class="advantage-desc">平均3天售出</text>
				</view>
				<view class="advantage-item">
					<text class="advantage-title">商户成长</text>
					<text class="advantage-desc">权益升级&工具赋能</text>
				</view>
			</view>
			<view class="detail-advantage-list">
				<view class="detail-advantage-item">
					<view class="icon-wrapper">
						<image :src="iconData[0]" mode="widthFix"></image>
					</view>
					<view class="detail-advantage-content">
						<text class="detail-advantage-title">优势货源，品类齐全</text>
						<text class="detail-advantage-desc">月交易型号上万，靓机型号占比高</text>
					</view>
				</view>
				<view class="detail-advantage-item">
					<view class="icon-wrapper">
						<image :src="iconData[1]" mode="widthFix"></image>
					</view>
					<view class="detail-advantage-content">
						<text class="detail-advantage-title">多仓直发，覆盖全国</text>
						<text class="detail-advantage-desc">核心城市大仓/小仓全覆盖，提升交易效率</text>
					</view>
				</view>
				<view class="detail-advantage-item">
					<view class="icon-wrapper">
						<image :src="iconData[2]" mode="widthFix"></image>
					</view>
					<view class="detail-advantage-content">
						<text class="detail-advantage-title">专业质检，透明公正</text>
						<text class="detail-advantage-desc">专业质检员，质检过程全程录像</text>
					</view>
				</view>
				<view class="detail-advantage-item">
					<view class="icon-wrapper">
						<image :src="iconData[3]" mode="widthFix"></image>
					</view>
					<view class="detail-advantage-content">
						<text class="detail-advantage-title">标准领先，定价准确</text>
						<text class="detail-advantage-desc">标准先锋，海量大数据辅助定价</text>
					</view>
				</view>
			</view>
			<view class="join-button" @click="setUpShop(1)">我要入驻</view>
		</view>
		<!-- 新商家入驻权益 -->
		<view class="new-merchant-benefit-section">
			<view class="section-title">
				<text class="iconfont icon-sparkle"></text>
				<text>新商家入驻权益</text>
				<text class="iconfont icon-sparkle"></text>
			</view>
			<view class="benefit-list">
				<view class="benefit-group">
					<view class="group-title">卖家权益</view>
					<view class="benefit-for">
						<view class="benefit-item" v-for="(sellerBenefit, index) in sellerBenefits" :key="index">
							<view class="icon-wrapper">
								<image :src="iconData[3+index]" mode="widthFix"></image>
							</view>
							<text class="benefit-text">{{ sellerBenefit.title }}</text>
						</view>
					</view>

				</view>
				<view class="benefit-group">
					<view class="group-title">买家权益</view>
					<view class="benefit-for">
						<view class="benefit-item" v-for="(buyerBenefit, index) in buyerBenefits" :key="index">
							<view class="icon-wrapper">
								<image :src="iconData[7+index]" mode="widthFix"></image>
							</view>
							<text class="benefit-text">{{ buyerBenefit.title }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 100rpx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				steps: ['经营信息', '实名认证', '签署合同'],
				currentStep: 0,
				sellerBenefits: [{
						iconClass: 'iconfont icon-diamond-arrow-up',
						title: '首台加价卖'
					},
					{
						iconClass: 'iconfont icon-lightning',
						title: '首月极速周转'
					},
					{
						iconClass: 'iconfont icon-box-arrow-out',
						title: '供货返券'
					},
					{
						iconClass: 'iconfont icon-yuan',
						title: '快速收款'
					}
				],
				buyerBenefits: [{
						iconClass: 'iconfont icon-smile',
						title: '专享货源'
					},
					{
						iconClass: 'iconfont icon-box-arrow-in',
						title: '退货无忧'
					},
					{
						iconClass: 'iconfont icon-box-arrow-out',
						title: '下单返券'
					}
				],
				iconData:[
					'https://wanshanglaike.com/upload/uniapp/apply/apply_1_1.png',
					'https://wanshanglaike.com/upload/uniapp/apply/apply_1_2.png',
					'https://wanshanglaike.com/upload/uniapp/apply/apply_1_3.png',
					'https://wanshanglaike.com/upload/uniapp/apply/apply_1_4.png',
					'https://wanshanglaike.com/upload/uniapp/apply/apply_2_1.png',
					'https://wanshanglaike.com/upload/uniapp/apply/apply_2_2.png',
					'https://wanshanglaike.com/upload/uniapp/apply/apply_2_3.png',
					'https://wanshanglaike.com/upload/uniapp/apply/apply_2_4.png',
					'https://wanshanglaike.com/upload/uniapp/apply/apply_3_1.png',
					'https://wanshanglaike.com/upload/uniapp/apply/apply_3_2.png',
					'https://wanshanglaike.com/upload/uniapp/apply/apply_3_3.png',
				]
			};
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			setUpShop(type) {
				this.$util.redirectTo('/pages/apply/agreement', {
					type
				});
				
			}
		}
	};
</script>

<style lang="scss">
	.page {
		background: linear-gradient(to bottom,
				#fe6d58 0%,
				#f5f5f9 25%,
				#f5f5f9 100%);
		padding: 40rpx;
	}

	.step-indicator {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 30rpx 0 40rpx 0;
	}

	.step {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		width: 33%;
	}

	.second-step {
		position: relative;
	}

	.second-step::before,
	.second-step::after {
		content: "";
		position: absolute;
		top: 25rpx;
		/* 横线位置，跟 step-number 圆点对齐 */
		width: 100rpx;
		/* 横线长度，可调 */
		height: 4rpx;
		background-color: #FFFFFF;
	}

	.second-step::before {
		left: -50rpx;
		/* 横线在左边 */
	}

	.second-step::after {
		right: -50rpx;
		/* 横线在右边 */
	}

	.step-number {
		width: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		border-radius: 50%;
		background-color: #f5f0f3;
		color: #ff7a45;
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.completed {
		background-color: #ff7a45;
		color: #fff;
	}


	.step-text {
		color: #f6e8ea;
		font-size: 24rpx;
	}

	.advantage-section {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 50rpx 30rpx;
		margin-bottom: 40rpx;
	}

	.section-title {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ff7a45;
		font-size: 36rpx;
		font-weight: bold;
	}

	.icon-sparkle {
		margin: 0 10rpx;
	}

	.advantage-list {
		display: flex;
		justify-content: space-around;
		margin-bottom: 50rpx;
		background: #fff6f5;
		padding: 50rpx 0;
		border-radius: 20rpx;
	}

	.advantage-item {
		text-align: center;
		display: flex;
		flex-direction: column;
		width: 33%;
	}
	.advantage-item-step {
	  position: relative;
	}
	.advantage-item-step::before,
	.advantage-item-step::after {
	  content: "";
	  position: absolute;
	   top: 50%;                  /* 顶部对齐到父容器中间 */
	   transform: translateY(-50%); /* 向上移动自身高度的一半，实现垂直居中 */
	  height: 60%;  
	  bottom: 0;
	  width: 2rpx;              /* 竖线宽度 */
	  background-color: #f6e6e8;   /* 竖线颜色 */
	}
	.advantage-item-step::before {
	  left: 0;  /* 左边竖线 */
	}
	
	.advantage-item-step::after {
	  right: 0; /* 右边竖线 */
	}

	.advantage-title {
		color: #ff7a45;
		font-size: 32rpx;
		font-weight: bold;
	}

	.advantage-desc {
		color: #666;
		font-size: 24rpx;
	}

	.detail-advantage-list {
		margin-bottom: 30rpx;
	}

	.detail-advantage-item {
		display: flex;
		align-items: center;
		margin-bottom: 50rpx;
	}

	.icon-wrapper {
		width: 90rpx;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background-color: #fde6e0;
	}

	.detail-advantage-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;
	}

	.detail-advantage-title {
		color: #333;
		font-size: 32rpx;
		font-weight: bold;
	}

	.detail-advantage-desc {
		color: #c1b7b8;
		font-size: 28rpx;
	}

	.join-button {
	    width: 100%;
	    height: 100rpx;
	    line-height: 100rpx;
	    text-align: center;
	    background-color: #ff7a45;
	    color: #fff;
	    font-size: 32rpx;
	    border-radius: 100rpx;
	    font-weight: bold;
	}

	.new-merchant-benefit-section {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 50rpx 30rpx;
	}

	.benefit-list {
		display: flex;
		justify-content: space-between;
		flex-direction: column;
	}

	.benefit-group {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.group-title {
		display: flex;
		/* 关键点：让 before/after 能左右分布 */
		align-items: center;
		justify-content: center;
		color: #ff7a45;
		font-size: 32rpx;
		font-weight: bold;
		margin: 20rpx 0;
	}

	.group-title::before,
	.group-title::after {
		content: "";
		flex: 1;
		height: 2rpx;
		/* 横线粗细 */
		background-color: #f7f7f7;
		/* 横线颜色 */
	}

	.group-title::before {
		margin-right: 20rpx;
		/* 横线和文字的间距 */
	}

	.group-title::after {
		margin-left: 20rpx;
	}

	.benefit-for {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.benefit-item {
		display: flex;
		align-items: center;
		flex-direction: column;
		margin-bottom: 20rpx;
		width: 25%;
	}

	.benefit-text {
		color: #857a79;
		font-size: 28rpx;
		margin-top: 20rpx;
	}
</style>